<template>
  <div class="Team" :style="imgStyle1">
    <!-- 项目页面 -->
    <div class="team-title"></div>
    <div class="team-items">
      <!-- 项目入口 -->
      <div class="item3">
        <div class="item-project item-css">
          <div class="title">我的项目</div>
          <div class="Items">
            <div
              class="item"
              v-for="project in projects"
              :key="project.id"
              v-show="project.status === '1'"
              @click="getProjectId(project)"
            >
              <div class="itemName">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-kaishishijian1"></use>
                </svg>
                {{ project.name }}
              </div>

              <div class="xing" @click="RunningItem(project)">
                <el-tooltip
                  class="item"
                  effect="dark"
                  content="进入项目"
                  placement="right"
                >
                  <i class="bi bi-three-dots"></i>
                </el-tooltip>
              </div>
              <div class="manager">
                {{ project.creater }}～{{ project.createTime }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="item1">
        <div class="item-info item-css">
          <h4>基本信息</h4>
          <div class="info-box">
            <!-- 进度信息 -->
            <div class="circle-items">
              <div class="circle-item">
                <p>日期</p>
                <!-- 天数 -->
                <el-progress type="circle" :percentage="pctDate"></el-progress>
              </div>
              <div class="circle-item">
                <p>用户故事</p>
                <!-- 12/43.5 -->
                <el-progress type="circle" :percentage="pctStory">
                </el-progress>
              </div>
              <div class="circle-item">
                <p>故事点</p>
                <!--  工时4/12 -->
                <el-progress type="circle" :percentage="pctworks"></el-progress>
              </div>
            </div>
            <!-- 项目信息 -->
            <div class="project-item">
              <div class="status">
                <span>项目状态</span>
                <el-tag
                  type="success"
                  effect="plain"
                  v-if="projectInfo.项目状态 == 2"
                >
                  已完成
                </el-tag>
                <el-tag
                  type="danger"
                  effect="plain"
                  v-else-if="projectInfo.项目状态 == 1"
                >
                  进行中
                </el-tag>
              </div>
              <div class="manager">
                <span>负责人</span>
                <span>{{ projectInfo.当前冲刺负责人 }}</span>
              </div>
              <div class="startTime">
                <span>当前冲刺开始时间:</span>
                <span> {{ projectInfo.当前冲刺开始时间 }}</span>
              </div>
              <div class="endTime">
                <span>当前冲刺结束时间:</span>
                <span> {{ projectInfo.当前冲刺结束时间 }}</span>
              </div>
            </div>
            <!-- 迭代目标 -->
            <!-- <div class="target">
              <p @click="RunningItem(projectInfo)">
                查看详情<i class="el-icon-right"></i>
              </p>
            </div> -->
          </div>
        </div>
        <!-- 项目冲刺表 -->
        <div class="item-time item-css">
          <div id="sprintTime" v-if="isEmpty == false" class="sprintTime"></div>
          <div class="sprintTime" v-else-if="isEmpty == true">
            <el-empty description="当前没有已经完成的冲刺"></el-empty>
          </div>
        </div>
      </div>
      <div class="item2">
        <div class="item-workInfo item-css">
          <div class="work-select">
            <el-select
              v-model="value"
              placeholder="请选择冲刺"
              @change="changeSprint()"
            >
              <el-option
                v-for="item in sprints"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
          <div class="workInfo-icons">
            <div class="workInfo-icon">
              <i class="el-icon-data-line story"></i
              ><span>用户故事 {{ stotynum }}</span>
            </div>
            <div class="workInfo-icon">
              <i class="el-icon-check check"></i
              ><span>任务 {{ worksnum }}</span>
            </div>
          </div>
          <div id="thisWorkInfo" class="thisWorkInfo"></div>
        </div>
        <div class="item-member item-css">
          <el-switch
            style="display: block"
            v-model="showMember"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="成员"
            inactive-text="成员贡献度"
          >
          </el-switch>
          <div id="member" class="member" v-show="showMember"></div>
          <div class="contribution" v-show="!showMember">
            <el-table
              :data="contributionList"
              style="width: 100%"
              size="medium "
              max-height="200"
            >
              <el-table-column prop="username" label="成员"> </el-table-column>
              <el-table-column prop="userStoryPointNum" label="用户故事">
              </el-table-column>
              <el-table-column prop="taskNum" label="任务"> </el-table-column>
              <el-table-column prop="userStoryPoint" label="工时">
              </el-table-column>
              <el-table-column prop="spurt" label="所属冲刺"> </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import "@/assets/css/Team.css";
import qs from "qs";
export default {
  name: "Team",
  data() {
    return {
      imgStyle1: {
        backgroundImage: `url(${require("@/assets/images/bgc.png")})`,
        backgroundRepeat: "no-repeat",
        backgroundSize: "cover",
      },
      projects: "",
      value: 1, // 选择冲刺工作项的值
      isEmpty: false, // 当前是否有冲刺表
      showMember: true, // 是否展示成员
      projectInfo: [], // 项目信息
      sprintTime: [], //冲刺表
      sprints: [], // 冲刺列表
      xData: [], //当前存在几个冲刺
      stotynum: "", //当前冲刺的用户故事数量
      worksnum: "", //任务故事数量
      totalHours: [], // 总工时
      doneHouts: [], //完成工时
      unfinished: [], //未完成数量
      underway: [], //进行中
      finished: [], //已完成数量
      pctDate: 0, //日期的百分比
      pctStory: 0, //用户故事的百分比
      pctworks: 0, //故事点的百分比
      membername: [], // 成员名字表
      memberCompleted: [], //成员完成工时贡献度
      memberInCompleted: [], //成员未完成贡献度
      contributionList: [], // 成员贡献度表
    };
  },
  methods: {
    //选择的当前项目
    RunningItem(projects) {
      this.$store.commit("UserStory/ITEM", projects);
      this.$router.push({
        name: "Items",
      });
    },
    //当前用户参与信息
    formatter(row, column) {
      return row.address;
    },
    // 绘制项目冲刺时间表
    drawSprintCharts() {
      // 初始化echarts实例对象
      let sprintCharts = this.$echarts.init(
        document.getElementById("sprintTime")
      );
      sprintCharts.setOption({
        title: {
          text: "项目冲刺表",
          x: "center",
          y: "top",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["总工时", "完成工时"],
          x: "right",
          y: "center",
          orient: "vertical",
        },
        toolbox: {
          show: true,
          feature: {
            magicType: { show: true, type: ["line", "bar"] },
          },
        },
        grid: [
          {
            left: "10%",
            bottom: "10%",
            top: "20%",
            right: "10%",
          },
        ],
        xAxis: [
          {
            type: "category",
            // prettier-ignore
            data: this.xData,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "总工时",
            type: "bar",
            barWidth: "25%",
            barMaxWidth: "70",
            data: this.totalHours,
            itemStyle: {
              color: "#20a0ff",
            },
          },
          {
            name: "完成工时",
            type: "bar",
            barWidth: "25%",
            barMaxWidth: "70",
            data: this.doneHouts,
            itemStyle: {
              color: "#88deac",
            },
            // markPoint: {
            //   data: [
            //     { name: "Max", value: 182.2, xAxis: 7, yAxis: 183 },
            //     { name: "Min", value: 2.3, xAxis: 11, yAxis: 3 },
            //   ],
            // },
          },
        ],
      });
    },
    //工作项图表
    drawWorkItem() {
      // 初始化echarts实例
      let thisWorkInfo = this.$echarts.init(
        document.getElementById("thisWorkInfo")
      );
      // 绘制图表
      thisWorkInfo.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // Use axis to trigger tooltip
            type: "shadow",
          },
        },
        legend: {
          // right: "5%",
          x: "right",
          y: "top",
          orient: "vertical",
          icon: "circle",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
        },
        yAxis: {
          type: "category",
          data: ["用户故事", "任务"],
        },
        series: [
          {
            name: "未开始",
            type: "bar",
            barWidth: "20%",
            stack: "total",
            label: {
              show: true,
            },
            itemStyle: {
              color: "#ff7575",
            },
            emphasis: {
              focus: "series",
            },
            data: this.unfinished,
          },
          {
            name: "进行中",
            type: "bar",
            barWidth: "20%",
            stack: "total",
            label: {
              show: true,
            },
            itemStyle: {
              color: "#ffcd5d",
            },
            emphasis: {
              focus: "series",
            },
            data: this.underway,
          },
          {
            name: "已完成",
            type: "bar",
            barWidth: "20%",
            stack: "total",
            label: {
              show: true,
            },
            itemStyle: {
              color: "#73d897",
            },
            emphasis: {
              focus: "series",
            },
            data: this.finished,
          },
        ],
      });
    },
    // 成员图表
    drawMember() {
      let member = this.$echarts.init(document.getElementById("member"));
      // 绘制图表
      member.setOption({
        title: {
          text: "成员",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          icon: "circle",
          x: "right",
          y: "top",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            // data: [
            //   "曾召雪",
            //   "高欣",
            //   "应伊拿",
            //   "邹伟",
            //   "李广",
            //   "张皓恺",
            //   "黎豪",
            // ],
            data: this.membername,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "已完成",
            type: "bar",
            stack: "Ad",
            barWidth: "25%",
            itemStyle: {
              color: "#73d897",
            },
            emphasis: {
              focus: "series",
            },
            data: this.memberCompleted,
          },
          {
            name: "未完成",
            type: "bar",
            stack: "Ad",
            barWidth: "25%",
            itemStyle: {
              color: "#ffcd5d",
            },
            emphasis: {
              focus: "series",
            },
            data: this.memberInCompleted,
          },
        ],
      });
    },
    // 改变星标项目
    changeStar(index) {},
    //点击获取项目id
    getProjectId(project) {
      let obj = {};
      obj.username = this.$store.state.LoginData.userformation[0].username;
      // obj.username = "应伊拿";
      obj.projectId = project.id;
      // 获取冲刺表
      setTimeout(() => {
        this.getSprintCharts(project.id);
      }, 2000);
      // 获取冲刺数量
      this.getSpurtList(project.id);
      // 初始化工作项 默认id为1
      this.changeSprint(project.id, this.value);
      // 获取成员表
      setTimeout(() => {
        this.getMemberChart(project.id);
      }, 2000);
      //获取成员贡献度
      this.getContributionList(project.id);
      this.$http({
        method: "post",
        url: `project/projectInfo`,
        data: qs.stringify(obj),
      }).then(({ data }) => {
        if (data.flag) {
          this.projectInfo = data.data;
          this.projectInfo.id = project.id;
          this.projectInfo.name = project.name;
          this.pctDate =
            parseFloat(this.projectInfo.天数占比) > 100
              ? 100
              : parseFloat(this.projectInfo.天数占比);
          if (this.projectInfo.当前冲刺已完成任务个数 != "0") {
            this.pctStory = parseFloat(
              (this.projectInfo.当前冲刺已完成任务个数 /
                this.projectInfo.当前冲刺总任务个数) *
                100
            );
          } else {
            this.pctStory = 0;
          }
          if (this.projectInfo.当前冲刺已完成工时 != "0.0") {
            this.pctworks = parseInt(
              (this.projectInfo.当前冲刺已完成工时 /
                this.projectInfo.当前冲刺总时长) *
                100
            );
          } else {
            this.pctworks = 0;
          }
        } else {
          // console.log(data);
        }
      });
    },
    // 获取项目冲刺表
    getSprintCharts(id) {
      this.$http({
        method: "post",
        url: `spurt/selectSpurtByProjectId?projectId=${id}`,
      }).then(({ data }) => {
        // console.log(response.data);
        if (data.flag) {
          if (data.data) {
            // 拿到里面的数据 传给data
            let arr = [];
            let obj = {};
            arr.push(data.data);
            for (let k in data.data) {
              obj.totalHours = data.data[k];
              obj.doneHouts = parseFloat(k);
            }
            if (this.xData.length != 0) {
              this.xData.splice(0, this.xData.length);
            }
            for (let i = 0; i < arr.length; i++) {
              this.xData.push("第" + (i + 1) + "个冲刺");
            }
            this.totalHours.push(obj.totalHours);
            this.doneHouts.push(obj.doneHouts);
            this.drawSprintCharts();
          } else {
            this.isEmpty = true;
          }
        } else {
          console.log(data);
        }
      });
    },
    // 获取冲刺数量表
    getSpurtList(id) {
      this.$http({
        method: "post",
        url: `spurt/selectAllSpurt?projectId=${id}&name=`,
      }).then(({ data }) => {
        if (data.flag) {
          // console.log(response.data.data);
          this.sprints = data.data;
        } else {
          console.log(data);
        }
      });
    },
    // 获取工作项
    getWorkItem(id, spurtid) {
      this.$http({
        method: "post",
        url: `project/userStoryAndTask?projectId=${id}&spurtId=${spurtid}`,
      }).then(({ data }) => {
        if (data.flag) {
          let obj = {};
          obj = data.data;
          // console.log(obj);
          if (this.finished.length != 0) {
            this.finished.splice(0, this.finished.length);
          }
          if (this.underway.length != 0) {
            this.underway.splice(0, this.underway.length);
          }
          if (this.unfinished.length != 0) {
            this.unfinished.splice(0, this.unfinished.length);
          }
          for (var k in obj) {
            if (k.search("已完成") != -1) {
              this.finished.push(obj[k]);
            } else if (k.search("进行中") != -1) {
              this.underway.push(obj[k]);
            } else if (k.search("未开始") != -1) {
              this.unfinished.push(obj[k]);
            }
          }
          this.stotynum =
            this.finished[0] + this.underway[0] + this.unfinished[0];
          this.worksnum =
            this.finished[1] + this.underway[1] + this.unfinished[1];

          setTimeout(() => {
            this.drawWorkItem();
          }, 2000);
        }
      });
    },
    // 改变当前冲刺
    changeSprint() {
      this.getWorkItem(this.projects[0].id, this.value);
    },
    // 获取成员图表
    getMemberChart(id) {
      this.$http({
        method: "post",
        url: `project/MemberContribution?projectId=${id}`,
      }).then(({ data }) => {
        // console.log(response.data);
        if (data.flag) {
          // console.log(response.data.data);
          let arr = [];
          arr = data.data;
          if (this.memberCompleted.length != 0) {
            this.memberCompleted.splice(0, this.memberCompleted.length);
          }
          if (this.memberInCompleted.length != 0) {
            this.memberInCompleted.splice(0, this.memberInCompleted.length);
          }
          if (this.membername.length != 0) {
            this.membername.splice(0, this.membername.length);
          }
          for (var i in arr) {
            this.membername.push(arr[i].username);
            this.memberCompleted.push(arr[i].timeCompleted);
            this.memberInCompleted.push(arr[i].timeInCompleted);
          }
          this.drawMember();
          // console.log(this.membername);
        } else {
          console.log(data);
        }
      });
    },
    // 获取成员贡献度
    getContributionList(id) {
      this.$http({
        method: "post",
        url: `project/userStoryAndTaskPro?projectId=${id}`,
      }).then(({ data }) => {
        if (data.flag) {
          this.contributionList = data.data;
        } else {
          console.log(data);
        }
      });
    },
  },
  mounted() {
    //获取项目
    let id = this.$store.state.LoginData.userformation[0].id;
    this.$http({
      method: "post",
      url: `enshrine/selectAll?userId=${id}`,
    }).then(({ data }) => {
      if (data.flag) {
        this.projects = data.data;
        this.getProjectId(data.data[0]);
      } else {
        console.log(data);
      }
    });
  },
};
</script>
<style lang="less" scoped>
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  font-size: 25px;
}
/deep/ .el-progress-circle {
  width: 50px !important;
  height: 50px !important;
}
/deep/ .el-table--medium .el-table__cell {
  padding: 5px 0;
}
</style>